<template> 
	<el-card class="form-container" shadow="never">
		<el-form :model="adminUser" :rules="rules" ref="adminUserFrom" label-width="150px">
			<el-form-item label="用户名：" prop="name">
				<el-input v-model="adminUser.name"></el-input>
			</el-form-item>
			<el-form-item v-if="!isEdit" label="密码：" prop="password">
				<el-input v-model="adminUser.password"></el-input>
			</el-form-item>
			<el-form-item label="头像：" prop="headImage">
				<cropper-upload :zoomScale='[1,1]' :maxCount="1" :value="imageList" @input="getImage">
				</cropper-upload>
			</el-form-item>
			<el-form-item label="角色：">
				<el-select v-model="adminUser.roleId" clearable>
					<el-option v-for="(item,index) in roleData" :key="index" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="状态：">
				<el-radio v-model="form.isLocked" :label="1">正常</el-radio>
				<el-radio v-model="form.isLocked" :label="0">禁用</el-radio>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit('adminUserFrom')">提交</el-button>
				<el-button v-if="!isEdit" @click="resetForm('adminUserFrom')">重置</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>
<script>
	import {
		addAdminUser,
		updateAdminUser,
		adminUserDetail
	} from '@/api/adminUser'
	import SingleUploadLocal from '@/components/Upload/singleUploadLocal'
	import {
		treeselect
	} from "@/api/dept";
	import Treeselect from "@riophae/vue-treeselect";
	import cropperUpload from "@/components/Upload/index"
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	const defaultAdminUser = {
		id: null,
		mobile: '',
		name: '',
		loginName: '',
		remark: '',
		headImage: '',
		isLocked: '',
		password: ''
	};
	export default {
		name: 'UpdateAdminUser',
		components: {
			SingleUploadLocal,
			Treeselect,
			cropperUpload
		},
		props: {
			isEdit: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				adminUser: Object.assign({}, defaultAdminUser),
				// 部门树选项
				deptOptions: [],
				imageList: [],
				rules: {
					name: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					headImage: [{
						required: true,
						message: '请上传头像',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					roleId: [{
						required: true,
						message: '请选择角色',
						trigger: 'change'
					}],
					isLocked: [{
						required: true,
						message: '请选择状态',
						trigger: 'change'
					}],
				}
			}
		},
		created() {
			this.adminUser.id = this.$route.query.id;
			this.isEdit = this.adminUser.id == null ? false : true;
			if (this.isEdit) {
				adminUserDetail(this.adminUser.id).then(response => {
					this.adminUser = response.data;
					if (!this.$.isEmpty(this.adminUser.headImage)) {
						this.imageList = [this.adminUser.headImage]
					}
				});
			} else {
				this.adminUser = Object.assign({}, defaultAdminUser);
			}
			this.getTreeselect();
		},
		methods: {
			getImage(val) {
				if (val.length == 0) {
					this.adminUser.headImage = ''
				} else {
					this.adminUser.headImage = val[0].url
				}
			},
			/** 查询部门下拉树结构 */
			getTreeselect() {
				treeselect().then(response => {
					this.deptOptions = response.data;
				});
			},
			onSubmit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$confirm('是否提交数据', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							let roleIds = [];
							if (this.adminUser.roles != undefined) {
								for (var i in this.adminUser.roles) {
									roleIds.push(this.adminUser.roles[i].id);
								}

							}
							if (this.isEdit) {
								updateAdminUser(this.adminUser).then(response => {
									this.$refs[formName].resetFields();
									this.$message({
										message: '修改成功',
										type: 'success',
										duration: 1000
									});
									this.$router.back();
								});
							} else {
								addAdminUser(this.adminUser).then(response => {
									this.$refs[formName].resetFields();
									this.adminUser = Object.assign({}, defaultAdminUser);
									this.$message({
										message: '提交成功',
										type: 'success',
										duration: 1000
									});
								});
							}
						});

					} else {
						this.$message({
							message: '验证失败',
							type: 'error',
							duration: 1000
						});
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.adminUser = Object.assign({}, defaultAdminUser);
			}
		}
	}
</script>
<style>
</style>
